import React,{useEffect ,useState} from 'react'
import { useNavigate } from 'react-router-dom';
import { useDispatch ,useSelector } from 'react-redux';
import { Grid,Cell, Image,Search, Toast   } from 'react-vant';
import '../../Api/DataList';
import axios from 'axios';
import {ALLLIST,STROETYPE ,PROPSTYPE} from '../../Type/Store.d';
import ChildrenItem from '../../Com/ChildrenItem';
import SwiperItem from '../../Com/SwiperItem';

function Index() {
    const Dispatch = useDispatch();
    const Navigate = useNavigate();

    useEffect(()=>{
        axios.get('/list').then(res=>{
            Dispatch({
                type:ALLLIST,
                payload:res.data.list,
            })
        })
    },[])
    const list = useSelector((state:STROETYPE)=>state.list);
    const onclickBtn = (id:number,item:PROPSTYPE)=>Navigate('/Detail/'+id,{state:item})
    return (
        <div className='Index'>
            <SwiperItem></SwiperItem>
            <Grid>
                {['今天', '你好', '努力', '敲代码'].map((item,index)=>{
                    return <Grid.Item icon={<Image width="44" height="44" round  src='https://img.yzcdn.cn/vant/cat.jpeg' />} text={item} key={index}/>
                })}
            </Grid>
            <nav>
                <h3>最近在玩</h3>
                <Image width="40" height="40" round  src='https://img.yzcdn.cn/vant/cat.jpeg' />
            </nav>
            <main>
                {list.map((item, index) => (
                    <ChildrenItem item={item} key={index} onclickBtn={onclickBtn}></ChildrenItem>
                ))}
            </main>
        </div>
    )
}

export default Index